<script setup lang='ts'>
import { useUserStore } from '../stores/user';
import { RouterLink } from 'vue-router';

</script>

<template>

  <div class="flex items-center justify-end w-full py-1 text-sm text-gray-800 border-b border-blue-300 text-opacity-80 bg-slate-200 opacity-70">
    
    <div v-if="useUserStore().token != null && useUserStore().token != '' " class="space-x-3">
      <span>欢迎:&nbsp; ***{{ useUserStore().token?.split('&')[1] }}</span>
      <RouterLink to="/user/bookcase">
        <span class="hover:text-red-600">我的书架</span>
      </RouterLink>
      <span class="w-0.5 my-0.5 border opacity-70 border-black"></span>
      <span class="cursor-pointer hover:text-red-600" @click="useUserStore().logout">退出登录</span>
    </div>
    <div v-else class="space-x-3 ">
      <RouterLink to="/login">
        <span class="hover:text-red-600">登录</span>
      </RouterLink>
      <RouterLink to="/register">
        <span class="hover:text-red-600">用户注册</span>
      </RouterLink>
    </div>
  </div>

</template>

<style scoped lang='scss'></style>